<template>
	<view class="start-run-container">
		<u-navbar fixed placeholder bgColor="#000000" height="90">
			<view class="u-nav-slot" slot="left">
				<text style="font-size: 60rpx;">跑步</text>
			</view>
			<view class="u-nav-slot" slot="right">
				<u-icon :name="require('../../static/imgs/right.png')" size="25" @click="submit"></u-icon>
			</view>
		</u-navbar>
		<!-- 计时器 -->
		<view class="time">
			<text>{{ti}}</text>
		</view>
		<view class="setting">
			<view class="setting-item">
				<view style="margin-bottom: 20rpx;">--</view>
				<view>配速</view>
			</view>
			<view class="setting-item">
				<view style="margin-bottom: 20rpx;">0.00</view>
				<view>公里</view>
			</view>
			<view class="setting-item">
				<view style="margin-bottom: 20rpx;">0</view>
				<view>千卡</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btns">
			<view class="btn-start" @click="begin">
				开始
			</view>
			<view class="btn-stop" @click="pause">
				暂停
			</view>
		</view>
		<view class="guide">
			<image src="../../static/imgs/music.png" mode=""></image>
			<text>跑步音乐与语音指导</text>
		</view>
		<u-modal @confirm="confirm" @cancel="cancel" :show="show" :zoom="false" content='您确定要结束跑步，并提交数据么？' showCancelButton buttonReverse>
		</u-modal>
	</view>
</template>

<script>
	import {runData} from "@/api/index.js"
	import {TOAST} from "@/utils/utils.js"
	export default {
		data() {
			return {
				times: "",
				ti: '00:00:00',
				timer: '',
				hour: 0,
				minutes: 0,
				seconds: 0,
				show: false
			};
		},
		destroyed() {
			clearInterval(this.timer);
		},
		created() {},
		methods: {
			// 开始计时
			begin() {
				clearInterval(this.timer);
				this.timer = setInterval(this.startTimer, 1000);
			},
			startTimer() {
				this.seconds += 1;
				if (this.seconds >= 60) {
					this.seconds = 0;
					this.minutes = this.minutes + 1;
				}

				if (this.minutes >= 60) {
					this.minutes = 0;
					this.hour = this.hour + 1;
				}
				this.ti = (this.hour < 10 ? '0' + this.hour : this.hour) + ':' + (this.minutes < 10 ? '0' + this.minutes :
					this.minutes) + ':' + (this.seconds < 10 ? '0' + this.seconds : this.seconds);
			},
			// 暂停倒计时
			pause() {
				if (this.timer) {
					clearInterval(this.timer);
					this.timer = null
				}
			},
			submit() {
				this.show = true
			},
			confirm(){
				clearInterval(this.timer)
				runData({
					userId:uni.getStorageSync("userId"),
					calorie:0,
					mileage:100,
					time:this.ti
				}).then(res=>{
					if(res.code===200){
						sessionStorage.setItem("time",this.ti)
						this.ti="00:00:00"
						this.show=false
						setTimeout(()=>{
							TOAST("数据录入成功")
							uni.switchTab({
								url:"/pages/index/index"
							})
						},1000)
					}
				})
				
			},
			cancel(){
				this.show=false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.start-run-container {
		height: 100%;
		background-color: #000000;
		overflow-y: auto;
		padding: 0 58rpx;

		.time {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 140rpx;
			font-size: 140rpx;
			font-weight: bold;
		}

		.setting {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 160rpx;
			font-size: 48rpx;

			.setting-item {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}

		.btns {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 80rpx;

			.btn-start {
				width: 158rpx;
				border-radius: 50%;
				background: #59A85F;
				height: 158rpx;
				line-height: 158rpx;
				text-align: center;
				font-size: 48rpx;
			}

			.btn-stop {
				width: 158rpx;
				border-radius: 50%;
				background: #BE000D;
				height: 158rpx;
				line-height: 158rpx;
				text-align: center;
				font-size: 48rpx;
			}
		}

		.guide {
			margin-top: 80rpx;
			padding: 28rpx;
			border-radius: 10rpx;
			background: #262626;
			display: flex;
			align-items: center;

			image {
				margin-right: 40rpx;
				width: 64rpx;
				height: 70rpx;
			}
		}
	}
</style>
